ice design 入门手札(一)

icework 新建页面

• src/nav.js 中修改菜单显示名字，此外可通过该文件配置首页左侧菜单。

const autoGenAsideNavs = [
  {
    text: "可视化文件管理",
    to: "/visualFileTable1",
    icon: 'home'
  }
];

请求数据CORS 后端处理(spring boot)

细粒度处理（类、方法）加注解：

@CrossOrigin(origins = "http://localhost:4444")

全局处理：

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                    .allowedOrigins("http://localhost:4444");
    //              .allowedMethods("PUT", "DELETE")
    //              .allowedHeaders("header1", "header2", "header3")
    //              .exposedHeaders("header1", "header2")
    //              .allowCredentials(false).maxAge(3600);
            }
        };
    }
}

tips:此处配置的是“localhost”，如果您访问的是127.0.0.1的话还是跨域失败的，聪明的你应该知道怎么解决。

修改页面baseURL及url，method默认为get，data-binder中对应params。如果是post改为data

@DataBinder({
  tableData: {
    // 详细请求配置请参见 https://github.com/axios/axios
    baseURL: 'http://localhost:8080/',
    url: 'complex-tab-table-list.json',
    params: {
      page: 1,
    },
    defaultBindingData: {
      list: [],
      total: 100,
      pageSize: 10,
      currentPage: 1,
    },
  },
})

@DataBinder({
  tableData: {
    baseURL: 'http://localhost:8080/',
    url: 'user/listUserByCriteria',
    method: 'post',
    data: {},
    //headers: {
    //  Accept: 'application/json',
    //  'Content-Type': 'multipart/form-data'
    //}
    defaultBindingData: {
      list: [],
      total: 100,
      pageSize: 3,
    },
  },
})

data-binder入门传送，听说近期会开源，坐等。

post form数据

默认post的Content-Type是application/json，习惯了application/x-www-form-urlencoded的话，可以npm install qs来包装下，

import qs from 'qs';

// TODO
componentDidMount() {
this.queryCache.pageIndex = 1;
this.queryCache.pageSize = 3;

this.data = qs.stringify({
  ...this.queryCache
});

this.fetchData();
}

// data存放查询参数
fetchData = () => {
this.props.updateBindingData('tableData', {
  data: this.data,
});
};

关于Pagination current

demo依赖mock数据中currentPage来更新current，改成实际后台数据后，不建议这么照搬。可参照官方Paginationdemo修改current到state里。

Icon

ice中提供了icon、FoundationSymbol两套图标。同时支持自定义图标DynamicIcon。css从iconfont获取（找到需要的图标添加到项目->选择Font class->生成地址）。注：目前采用fontclass引入字体图标，故不支持多色。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import DynamicIcon from 'dynamic-icon';

// 使用 custom 生成自定义 ICON 组件
const CustomIcon = DynamicIcon.create({
  fontFamily: 'iconfont',
  prefix: 'icon',
  css: 'https://at.alicdn.com/t/font_1472628097_7496383.css'
});
export default CustomIcon;

其他页面使用

import CustomIcon from '../../../../components/CustomIcon';

...

<CustomIcon type="dingding" />

webpack path

node_modulesice-scriptslibconfigwebpack.config.dev.js
node_modulesice-scriptslibconfigwebpack.config.prod.js

关于作者